.settings-container-contain
	background-color $BgColor1
	height 100%
	width calc(100% - 5px)
	position fixed
	scrollable()
	padding-top: $TitleHeight + 10px 
	&::-webkit-scrollbar-track
		margin-top: $TitleHeight

.settings-container
	z-index 1
	width 100%
	height auto
	position absolute
	background-color $BgColor1
	-webkit-user-select none
	padding-bottom 20px

	.sidebar
		float left
		position relative
		margin-left 20px
		padding-right 30px
		width 200px
		height 100%
		border-right solid $SettingsSeparator 1px

		div
			position relative
			text-align right
			color $SettingsCategoriesText
			font-family $Font, $AlternateFont
			font-size 17px

		.title
			position relative
			color $Text1
			font-size 22px

		.user-interface
			margin-top 25px
			height 105px

		.quality-options
			height 100px
			padding-top 38px

		.subtitles-options
			height 75px
			padding-top 45px

		.trakt-options
			height 160px
			padding-top 38px

			&.authenticated
				height 100px

		.more-options
			height 70px
			padding-top 45px

		.advanced-settings
			height 200px
			padding-top 45px

	.content
		float left
		position relative
		margin-left 32px
		padding-top: 45px;
		width calc(100% - 253px)
		height 100%
		color $Text2
		font-family $Font, $AlternateFont
		font-size 13px

		.help
			position: absolute;
			top: 5px;
			font-size: 21px
			color: $Text3
			cursor pointer
			z-index 100
			transition all .5s

			&:hover
				color: $Text1
				transition all .5s

		p
			color $SettingsText1
			font-family $Font, $AlternateFont
			font-size 13px
			float left
			margin-top 9px
			min-width 150px

		input[type="text"], input[type="password"]
			margin-left 10px
			padding-right 10px
			padding-left 10px
			height 30px
			line-height 25px
			border 0px solid $InputBoxBg
			background-color $InputBoxBg
			resize none
			color $InputBoxText
			font-family $Font, $AlternateFont
			font-size 13px
			cursor text
			outline 0
            
		em
			color $SettingsText2
			font-size 12px
			
		.btns
			float right

		.btn-settings
			position relative
			margin-top 13px
			float left
			padding-left 10px
			padding-right 10px
			margin-right 20px
			border-radius $ButtonRadius
			height 35px
			background-color $ButtonBg
			text-align center
			color $SettingsButtonText
			font-family $ButtonFont, $AlternateFont
			font-size 12px
			line-height 34px
			cursor pointer
			transition background-color .5s
			&:hover
				background-color $ButtonBgHover
				color $SettingsButtonTextHover
				text-decoration none
			&.disabled
				background-color $ButtonBgDisabled
				&:hover
					background-color $ButtonBgDisabled
				&:active
					background-color $ButtonBgDisabled

			&.green
				background-color #27AE60
			&.red
				background-color #F15153
			&:active
				box-shadow: inset 0 1px 4px rgba(0,0,0,0.6)
				background: $ButtonBgActive

		.user-interface
			border-bottom solid $SettingsSeparator 1px
			margin-right 30px
			overflow hidden
			padding-bottom 25px

		.quality-options
			height 100px
			padding-top 20px
			border-bottom solid $SettingsSeparator 1px
			margin-right 30px

		.subtitles-options
			height 75px
			padding-top 20px
			border-bottom solid $SettingsSeparator 1px
			margin-right 30px

		.trakt-options
			height 160px
			padding-top 20px
			border-bottom solid $SettingsSeparator 1px
			margin-right 30px

			&.authenticated
				height 100px

		.more-options
			height 70px
			padding-top 20px
			border-bottom solid $SettingsSeparator 1px
			margin-right 30px

		.advanced-settings
			height 200px
			padding-top 20px

	.dropdown.subtitles-size
		p
			min-width 40px

input[type=checkbox]
	&.settings-checkbox
		position: absolute;
		overflow: hidden;
		clip: rect(0 0 0 0);
		height:1px;
		width:1px;
		margin:-1px;
		padding:0;
		border:0;

	&.settings-checkbox+label.settings-label
		padding-left:20px;
		height:15px;
		display:inline-block;
		line-height:15px;
		background-repeat:no-repeat;
		background-position: 0 0;
		font-size:13px;
		font-family: $Font, $AlternateFont;
		vertical-align:middle;
		cursor:pointer;
		color:$SettingsText1

	&.settings-checkbox:checked+label.settings-label
		background-position: 0 -15px;

.settings-label
	background-image url('../images/icons/checkbox.png')

.settings-container-check-settings
	width 14px
	height 14px
	margin-top 59px
	position relative
	label
		cursor pointer
		position absolute
		top 0
		width 14px
		height 14px
		border-radius 3px
		background-clip padding-box
		background-color $InputBoxBg

		&:after
			opacity 0
			content ''
			position absolute
			width 10px
			height 6px
			background transparent
			top 2px
			left 2px
			border 3px solid $ButtonBgActive
			border-top none
			border-right none
			transform rotate(-45deg)
	input[type=checkbox]:checked
		& + label
			&:after
				opacity 1

.checkbox-text
	font-family $Font, $AlternateFont
	color $Text2
	font-size 13px
	margin-left 20px
	width 400px

.open-tmp-folder
	font-size: 16px
	margin-left: 10px;
	transition: all .5s;
	&:hover
		cursor: pointer;
		color: $ButtonBgActive;
		transition: all .5s;

#faketmpLocation
	width auto
	height 30px

.dropdown
	select
		margin-left 10px
		position relative
		padding-left 5px
		border 0 !important
		-webkit-appearance none
		height 30px
		background-color $InputBoxBg
		cursor pointer
		color $InputBoxText
		font-family $Font, $AlternateFont
		font-size 13px
		float left
		outline 0
		line-height 15px
		padding-right 15px

	option
		background $InputBoxBg
		border 0 !important
		outline 0
	p
		color $Text2
		font-family $Font, $AlternateFont
		font-size 13px
		float left
		margin-top 9px
	&.download-limit
		top 24px
	&.upload-limit
		top 24px
		left 31px
	&.local-port
		top 24px
		left 65px
		float left
	&.subtitles-language
		top 0px
	&.pct-theme
		top 0px
		left 15px
		p
			width: 60px
			min-width: 0px
	&.subtitles-language-default
		top 0px
	&.subtitles-font
		top 50px
		left -386px

	&.subtitles-style
		top 50px
		left -356px

	&.subtitles-size
		left 15px

	&.subtitles-color
		top 50px
		left -296px

.dropdown-arrow
	width 0
	height 0
	border-left 4px solid transparent
	border-right 4px solid transparent
	border-top 5px solid $Text2
	top 13px
	margin-left -13px
	position relative
	float left
	cursor pointer

.port-text
	top 1px
	left 5px
	position relative
	width 56px
	height 29px
	border 0px solid $InputBoxBg
	background-color $InputBoxBg
	resize none
	color $Text2
	font-family $Font, $AlternateFont
	font-size 13px
	line-height 25px
	padding-left 13px
	cursor text
	outline 0

.success_alert
	position fixed
	top 45px
	right 20px
	color $Text1
	font-family $MainFont, $AlternateFont
	font-size 16px

#checkmark-notify
	display inline-block
	width 20px
	height 20px
	transform rotate(45deg)

#stem-notify
	position absolute
	width 3px
	height 12px
	background-color $Text1
	left 11px
	top 6px

#kick-notify
	position absolute
	width 6px
	height 3px
	background-color $Text1
	left 6px
	top 15px

hr
	border-color lighten(#17181b,20%)
	height 1px

@keyframes rotate-forever
	0%
		transform rotate(0deg)

	100%
		transform rotate(360deg)

.trakt-options
	color $SettingsText1
    
	a
		display inline-block

	.unauthtext
		margin-left 5px
		color $ButtonBgActive
		&:hover{ color: $ButtonBgHover; }

	aside
		margin-top 5px

	.loading-spinner
		animation-duration 0.75s
		animation-iteration-count infinite
		animation-name rotate-forever
		animation-timing-function linear
		width 20px
		height 20px
		border 4px solid #2d75df
		border-right-color transparent
		border-radius 50%
		display inline-block
		margin 0px 0px -5px -27px

	.invalid-cross
		width 20px
		height 20px
		display inline-block
		margin 0px 0px -5px -27px

		&:before
			content "\2573"
			font-family Arial
			font-size 12px
			font-weight bolder
			text-shadow 0 0 10px #EE3030
			color #EE3030

	.valid-tick
		width 20px
		height 20px
		display inline-block
		margin 0px 0px -5px -27px

		&:before
			content "\2714"
			font-family Arial
			font-size 17px
			font-weight bold
			text-shadow 0 0 10px #4EEE30
			color #4EEE30
			position relative
			top 2px

	.syncTrakt
		margin-left: 15px